<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>Card</title>
	<script src="%VITE_BUNDLE_PATH%" type="module"></script>


	<link rel="stylesheet" type="text/css" href="./styles/Card.css">
</head>

<body class="card1auto">
	<ui5-card id="card" class="myCard">
		<ui5-card-header
			id="cardHeader"
			slot="header"
			additional-text="4 of 10"
			title-text="Quick Links"
			subtitle-text="Quick links sub title"
			interactive>
		</ui5-card-header>

		<ui5-list id="myList3" separators="Inner">
			<ui5-li icon="horizontal-bullet-chart">Template Based Segmentation</ui5-li>
			<ui5-li icon="opportunity">Segmentation Models</ui5-li>
			<ui5-li icon="line-charts">Marketing plans</ui5-li>
		</ui5-list>

		<ui5-input id="field" value="0" class="myInput"></ui5-input>
	</ui5-card>

	<ui5-card id="card2" class="myCard">
		<ui5-card-header
			id="cardHeader2"
			slot="header"
			additional-text="4 of 10"
			title-text="Quick Links"
			subtitle-text="Quick Links">
			<ui5-icon name="group" slot="avatar"></ui5-icon>
		</ui5-card-header>

		<ui5-list id="myList3" separators="None">
			<ui5-li icon="horizontal-bullet-chart">Template Based Segmentation</ui5-li>
			<ui5-li icon="opportunity">Segmentation Models</ui5-li>
		</ui5-list>
	</ui5-card>

	<ui5-card id="card2a" class="myCard">
		<ui5-card-header
			id="cardHeader2a"
			slot="header"
			class="myCardHeader--ar-he-ch"
			title-text="مرحبًا שלום"
			subtitle-text="Quick Links">
			<img src="./img/John_Miller.png" alt="John Miller" slot="avatar">
		</ui5-card-header>
		<div class="myTextContent">
			<span>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel aliquam augue.
			</span>
		</div>
	</ui5-card>

	<ui5-card id="card2b" class="myCard">
		<ui5-card-header
			id="cardHeader2b"
			slot="header"
			title-text="Quick Links"
			subtitle-text="Quick Links">
			<img src="./img/John_Miller.png" alt="John Miller" slot="avatar">
			<ui5-button slot="action" design="Transparent">Some Action</ui5-button>
		</ui5-card-header>
		<div class="myTextContent">
			<span>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel aliquam augue.
			</span>
		</div>
	</ui5-card>

	<ui5-card id="card2c" class="myCard">
		<ui5-card-header
			id="cardHeader2c"
			slot="header"
			title-text="Quick Links"
			subtitle-text="Long long long long long long long long subtitle">
			<img src="./img/John_Miller.png" alt="John Miller" slot="avatar">
			<ui5-button slot="action" design="Transparent">Some Action</ui5-button>
		</ui5-card-header>
		<div class="myTextContent">
			<span>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel aliquam augue.
			</span>
		</div>
	</ui5-card>

	<ui5-card id="card2d" class="myCard">
		<ui5-card-header
			id="cardHeader2d"
			slot="header"
			additional-text="4 of 10"
			title-text="Quick Links">
			<img src="./img/John_Miller.png" alt="John Miller" slot="avatar">
		</ui5-card-header>
		<div class="myTextContent">
			<span>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel aliquam augue.
			</span>
		</div>
	</ui5-card>

	<ui5-card id="card2e" class="myCard">
		<ui5-card-header
			id="cardHeader2e"
			slot="header"
			additional-text="4 of 10"
			title-text="Long Long Long Long Long Long Title">
			<img src="./img/John_Miller.png" alt="John Miller" slot="avatar">
		</ui5-card-header>
		<div class="myTextContent">
			<span>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel aliquam augue.
			</span>
		</div>
	</ui5-card>

	<ui5-card id="card2f" class="myCard">
		<ui5-card-header
			id="cardHeader2f"
			slot="header"
			additional-text="4 of 10"
			title-text="Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Title"
			subtitle-text="Long long long long long long long long long long long long long subtitle">
			<img src="./img/John_Miller.png" alt="John Miller" slot="avatar">
		</ui5-card-header>
		<div class="myTextContent">
			<span>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel aliquam augue.
			</span>
		</div>
	</ui5-card>

	<ui5-card id="card2g" class="myCard">
		<ui5-card-header
			id="cardHeader2g"
			slot="header"
			additional-text="4 of 10"
			title-text="Quick Links">
		</ui5-card-header>
		<div class="myTextContent">
			<span>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel aliquam augue.
			</span>
		</div>
	</ui5-card>

	<ui5-card id="card2h" class="myCard">
		<ui5-card-header
			id="cardHeader2h"
			slot="header"
			additional-text="4 of 10"
			title-text="Quick Links"
			subtitle-text="Subtitle">
			<ui5-button slot="action" design="Transparent" icon="overflow"></ui5-button>
		</ui5-card-header>
		<div class="myTextContent">
			<span>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel aliquam augue.
			</span>
		</div>
	</ui5-card>

	<ui5-card id="card3">
		<ui5-card-header
			id="cardHeader3"
			slot="header"
			title-text="Quick Links"
			subtitle-text="Quick Links"
			interactive>
			<ui5-button slot="action">Act</ui5-button>
		</ui5-card-header>

		<ui5-list id="myList3" separators="Inner">
			<ui5-li icon="horizontal-bullet-chart">Template Based Segmentation</ui5-li>
			<ui5-li icon="opportunity">Segmentation Models</ui5-li>
		</ui5-list>
	</ui5-card>

	<ui5-card class="myCard" id="actionCard">
		<ui5-card-header
			id="actionCardHeader"
			slot="header"
			title-text="Linked Activities (5)"
			additional-text="4 of 10">
			<ui5-button icon="add" slot="action" design="Transparent">Add activity</ui5-button>
		</ui5-card-header>

		<ui5-list id="myList3" separators="Inner">
			<ui5-li icon="horizontal-bullet-chart">Increase customer satisfaction by 10% using marketing methods</ui5-li>
			<ui5-li icon="opportunity">Get 1000 survey responses to annual employee survey</ui5-li>
		</ui5-list>
	</ui5-card>

	<ui5-card class="myCard">
		<ui5-card-header
			slot="header"
			title-text="Linked Activities (5)"
			subtitle-text="Quick Links">
			<ui5-icon name="group" slot="avatar"></ui5-icon>
		</ui5-card-header>

		<ui5-list id="myList3" separators="Inner">
			<ui5-li icon="horizontal-bullet-chart">Template Based Segmentation</ui5-li>
			<ui5-li icon="opportunity">Segmentation Models</ui5-li>
		</ui5-list>
	</ui5-card>

	<ui5-card id="card4">
		<ui5-card-header
			id="cardHeader4"
			slot="header"
			title-text="Quick Links"
			subtitle-text="Quick Links">
		</ui5-card-header>

		<ui5-list id="myList3" separators="Inner">
			<ui5-li icon="horizontal-bullet-chart">Template Based Segmentation</ui5-li>
			<ui5-li icon="opportunity">Segmentation Models</ui5-li>
		</ui5-list>
	</ui5-card>

	<ui5-card class="myCard" id="actionCard2">
		<ui5-card-header
			id="actionCardHeader2"
			slot="header"
			title-text="Linked Activities (5)"
			additional-text="4 of 10">
			<ui5-button icon="add" slot="action" design="Transparent">Add activity</ui5-button>
		</ui5-card-header>

		<ui5-list id="myList3" separators="Inner">
			<ui5-li icon="horizontal-bullet-chart">Increase customer satisfaction by 10% using marketing methods</ui5-li>
			<ui5-li icon="opportunity">Get 1000 survey responses to annual employee survey</ui5-li>
		</ui5-list>
	</ui5-card>

	<ui5-card class="myCard">
		<ui5-card-header
			slot="header"
			title-text="Linked activities (5)"
			subtitle-text="Quick Links">
			<ui5-button icon="add" slot="action" design="Transparent">Add activity</ui5-button>
		</ui5-card-header>

		<ui5-list id="myList3" separators="Inner">
			<ui5-li icon="horizontal-bullet-chart">Increase customer satisfaction by 10% using marketing methods</ui5-li>
			<ui5-li icon="opportunity">Get 1000 survey responses to annual employee survey</ui5-li>
		</ui5-list>
	</ui5-card>

	<ui5-card>
		<ui5-card-header
			slot="header"
			title-text="Linked Activities (5)">
			<ui5-icon name="group" slot="avatar"></ui5-icon>
			<ui5-button icon="add" slot="action" design="Transparent">Add activity</ui5-button>
		</ui5-card-header>

		<ui5-list id="myList3" separators="Inner">
			<ui5-li icon="horizontal-bullet-chart">Increase customer satisfaction by 10% using marketing methods</ui5-li>
			<ui5-li icon="opportunity">Get 1000 survey responses to annual employee survey</ui5-li>
		</ui5-list>
	</ui5-card>

	<ui5-card id="textAreaAriaLabel" class="myCard">
		<ui5-card-header
			slot="header"
			id="header"
			additional-text="4 of 10"
			title-text="Linked Activities (5)"
			subtitle-text="Quick Links">
		</ui5-card-header>
	</ui5-card>

	<br>
	<ui5-label id="infoText">info text</ui5-label>

	<ui5-card id="textAreaAriaLabelledBy">
		<ui5-card-header
			slot="header"
			id="header2"
			title-text="New Jobs (5)"
			subtitle-text="Find One">
		</ui5-card-header>
	</ui5-card>

	<ui5-card id="textAreaAriaLabelledBy">
		<div slot="header" id="header2" class="myHeader">
			Test
		</div>

		<ui5-list id="myList3" separators="Inner">
			<ui5-li icon="horizontal-bullet-chart">Increase customer satisfaction by 10% using marketing methods</ui5-li>
			<ui5-li icon="opportunity">Get 1000 survey responses to annual employee survey</ui5-li>
		</ui5-list>
	</ui5-card>

	<ui5-card>
		<ui5-list id="myList3" separators="Inner">
			<ui5-li icon="horizontal-bullet-chart">Increase customer satisfaction by 10% using marketing methods</ui5-li>
			<ui5-li icon="opportunity">Get 1000 survey responses to annual employee survey</ui5-li>
		</ui5-list>
	</ui5-card>

	<ui5-card id="textCard" accessible-name="Internships">
		<ui5-card-header
			slot="header"
			id="header4"
			title-text="New Internships">
		</ui5-card-header>
	</ui5-card>

	<ui5-card id="textCardRef" accessible-name="Internships" accessible-name-ref="cont">
		<ui5-card-header
			id="header5"
			slot="header"
			title-text="New Positions">
		</ui5-card-header>

		<div id="cont" class="myContent">I am the content</div>
	</ui5-card>

	<ui5-card
		id="loadingCard"
		loading
		loading-delay="500"
		accessible-name="My Card">
		<ui5-card-header
			id="loadingCardHeader"
			slot="header"
			interactive
			title-text="Interactive Header">
			<ui5-button slot="action">Header Button</ui5-button>
		</ui5-card-header>
		<div class="myContent">
			<ui5-button>Content Button</ui5-button>
		</div>
	</ui5-card>

	<script>
		function onClick(event) {
			console.log(event);
			field.value = `${parseInt(field.value) + 1}`;
		}

		[cardHeader, cardHeader2, cardHeader3, loadingCardHeader].forEach(function (el) {
			el.addEventListener("ui5-click", onClick);
		});
	</script>
</body>

</html>
